import React, { useRef, useState } from "react";
import { Button } from "antd";

const Index: React.FC = () => {
  const inputRef = useRef<HTMLInputElement | null>(null);
  
  const [urls, setUrls] = useState<string[]>([]);
  // 改变事件 => 选中文件了
  const handleChange = () => {
    // 1. 获取上传的所有文件 类数组
    const files = inputRef.current?.files as FileList;
    // 2. 获取上传的每一个文件
    [...files].forEach(file => {
      // 2-1 file 每一个文件
      // 新建文件读取类
      const fr = new FileReader();
      // 开始读取文件
      fr.readAsDataURL(file);
      // 绑定事件 load  => 读取完成
      fr.addEventListener('load', () => {
        // 结果
        setUrls(urls => [...urls, fr.result as string])
      })
    })
  }
  return (
    <div>
      <input multiple type="file" ref={inputRef} style={{ display: "none" }} onChange={() => handleChange()}/>
      <Button type="primary" onClick={() => inputRef.current?.click()}>
        上传
      </Button>
      {
        urls.map((v, i) => {
          return <img src={v} key={i} alt="" height={200}/>
        })
      }
    </div>
  );
};

export default Index;
